<template>
	<view class="l-swiper" :style="{padding:type == 'card' ?'20 0rpx':'0rpx'}">
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
			class="swiper-box" :style="{height:height+'rpx'}" :circular="circular" :current="value"
			:previous-margin="type == 'card' ? '60rpx' : '0'" :next-margin="type == 'card' ? '60rpx' : '0'"
			@change="change">
			<swiper-item v-for="(item, index) in banner" :key="index" class="swiper-item"
				:style="{padding:type == 'card' ?'0 16rpx':'0rpx'}">

				<view class="swiper-image"
					:style="{borderRadius:type == 'card' ?'12rpx':'0rpx',height:height+'rpx'}"
					:class="[value != index&&type == 'card' ? 'swiper-scsle' : '']" @tap="clickItem(index)">
					<image :src="item.src"  mode="scaleToFill" lazy-load></image>
					<view class="noveBox">
						<slot></slot>
					</view>
				</view>

			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name: 'lSwiper',
		props: {
			// 图片数组
			banner: {
				type: Array,
				default: []
			},
			// 轮播图高度
			height: {
				type: Number,
				default: 240
			},
			// 当前轮播图
			value: {
				type: Number,
				default: 0
			},
			// 类型 卡片card 默认normal
			type: {
				type: String,
				default: 'normal'
			},
			// 展示指示器
			indicatorDots: {
				type: Boolean,
				default: true
			},
			// 是否自动切换
			autoplay: {
				type: Boolean,
				default: true
			},
			// 自动切换时间间隔
			interval: {
				type: Number,
				default: 6000
			},
			// 切换滑动动画时长
			duration: {
				type: Number,
				default: 1000
			},
			// 是否采用衔接滑动，即播放到末尾后重新回到开头	
			circular: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {

			}
		},
		methods: {
			change(e) {
				this.$emit('input', e.detail.current)
				// this.$emit("offShow", false)
			},
			clickItem(index) {
				this.$emit('clickItem', index)
				this.$emit('input', index)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.l-swiper {
		width: 100%;
		box-sizing: border-box;

		.swiper-box {
			width: 100%;

			.swiper-item {
				box-sizing: border-box;

			}

			.swiper-image {
				width: 100%;
				display:flex;
				justify-content: center;
				align-items: center;
				position: relative;
				overflow: hidden;
				.noveBox {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-scsle {
				transform: scaleY(0.8);
				transform-origin: center center;
				transition: all .3s ease-in;
			}

			/* #ifdef MP-WEIXIN */
			/deep/ .wx-swiper-dot {
				width: 8rpx;
				height: 8rpx;
				display: inline-flex;
				background: none;
				justify-content: space-between;
			}

			/deep/ .wx-swiper-dot::before {
				content: '';
				flex-grow: 1;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 16rpx;
				overflow: hidden;
			}

			/deep/.wx-swiper-dot-active::before {
				background: #fff;
			}

			/deep/ .wx-swiper-dot.wx-swiper-dot-active {
				width: 16rpx;
			}

			/* #endif
      
      /* #ifndef MP-WEIXIN */
			::v-deep .uni-swiper-dot {
				width: 8rpx;
				height: 8rpx;
				display: inline-flex;
				background: none;
				justify-content: space-between;
			}

			::v-deep .uni-swiper-dot::before {
				content: '';
				flex-grow: 1;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 16rpx;
				overflow: hidden;
			}

			::v-deep .uni-swiper-dot-active::before {
				background: #fff;
			}

			::v-deep .uni-swiper-dot.uni-swiper-dot-active {
				width: 16rpx;
			}

			/* #endif */

		}
	}
</style>